<template>
    <div :style="{
        height: '100vh',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',
        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
            <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState"
                class="ant-advanced-search-form">
                <a-row :gutter="24">


                    <a-col :span="6">
                        <a-form-item label="项目编号" name="code">
                            <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-form-item label="项目名称" name="name">
                            <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                    </a-col>

                </a-row>
            </a-form>
        </a-card>
        <a-card :bordered="false">
            <s-table ref="tableRef" :scroll="{ x: 1000, }"
                :tool-config="{ refresh: true, height: true, columnSetting: true, striped: false }" bordered
                :data="loadData" :columns="columns" :pagination="false" class="mb-2">
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                        <!-- <a-space>
                            <a-button type="primary" @click="showEdit = true">
                                <template #icon>
                                    <plus-outlined />
                                </template>
<span>新增</span>
</a-button>

</a-space> -->
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>

                    <template v-if="column.key === 'month'">
                        {{ record.reimburseDate }}
                    </template>
                    <template v-if="column.key === 'control'">
                        <a @click="show(record)">查看</a>
                    </template>
                </template>
            </s-table>
        </a-card>
        <info ref="infoRef"></info>
    </div>
</template>

<script setup name="other">
import api from '@/api/pm/cost/realcost'
import { message } from 'ant-design-vue'
import info from './components/realcost/Info.vue'
import { progressOptions, roles, documentTypes } from '@/utils/constants.js'
const infoRef = ref()
const searchFormState = ref({
})
const tableRef = ref()
const reset = () => {
    searchFormState.value = {}
}
const show = (record) => {
    infoRef.value.show(record)
}
const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 80,
        align: "center",
    },

    {
        title: '项目编号',
        dataIndex: 'code',
        key: 'code',
        width: 180,
        align: "center",
    },
    {
        title: '项目名称',
        dataIndex: 'name',
        key: 'name',
        width: 180,
        align: "center",
    },

    {
        title: '材料成本',
        dataIndex: 'materialCost',
        key: 'materialCost',
        width: 120,
        align: "center",
    },
    {
        title: '劳务成本',
        dataIndex: 'laborAmount',
        key: 'laborAmount',
        width: 120,
        align: "center",
    },

    {
        title: '机械费用',
        dataIndex: 'mechanicalAmount',
        key: 'mechanicalAmount',
        width: 120,
        align: "center",
    },
    {
        title: '其他费用',
        dataIndex: 'otherAmount',
        key: 'otherAmount',
        width: 120,
        align: "center",
    },
    {
        title: '成本总额',
        dataIndex: 'actualCost',
        key: 'actualCost',
        width: 120,
        align: "center",
    },
    {
        title: '预算偏差率',
        dataIndex: 'deviation',
        key: 'deviation',
        width: 120,
        align: "center",
    },
    {
        title: '负责人',
        dataIndex: 'directorName',
        key: 'directorName',
        width: 120,
        align: "center",
    },
    // {
    //     title: '审核状态',
    //     dataIndex: 'stateText',
    //     key: 'stateText',
    //     width: 120,
    //     align: "center",
    // },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: 120,
        align: "center",
        fixed: "right"
    },
]

const loadData = (parameter) => {
    searchFormState.value.current = parameter.current
    searchFormState.value.size = parameter.size
    return api.page(searchFormState.value).then((res) => {

        return res
    })
}


</script>
<style scoped></style>
